<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <title>静态资管理系统</title>
    <style>
      .list-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      button.del-project {
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="panel panel-default" style="width: 900px;margin: 30px auto 0;">
      <div class="panel-heading">
        <h2 class="panel-title list-head">
          <span>列表页面</span>
          <a href="./add.html"><button class="btn btn-success">新增资源</button></a>
        </h2>
      </div>
      <div class="panel-body">
        <div class="panel-group" id="accordion"></div>
      </div>
    </div>
    <script>
      function dateFtt(fmt, date) {
        //author: meizz
        var o = {
          'M+': date.getMonth() + 1, //月份
          'd+': date.getDate(), //日
          'h+': date.getHours(), //小时
          'm+': date.getMinutes(), //分
          's+': date.getSeconds(), //秒
          'q+': Math.floor((date.getMonth() + 3) / 3), //季度
          S: date.getMilliseconds() //毫秒
        }
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
        return fmt
      }

      function getList() {
        $.get('/list', function(res) {
          var html = ''
          for (var i = 0; i < res.length; i++) {
            html += '<div class="panel panel-default">'
            html += '<div class="panel-heading">'
            html += '<h4 class="panel-title">'
            html +=
              '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' +
              i +
              '">' +
              res[i].name +
              '（' +
              dateFtt('yyyy-MM-dd hh:mm:ss', new Date(res[i].time)) +
              '）' +
              '</a>'
            html += '</h4>'
            html += '</div>'
            html += '<div id="collapse' + i + '" class="panel-collapse collapse">'
            html += '<div class="panel-body">'
            html += '<ul class="list-group">'
            for (var j = 0; j < res[i].children.length; j++) {
              html += '<li class="list-group-item">'
              var name = encodeURI('/' + res[i].name + '/' + res[i].children[j].name)
              html +=
                '<a target="_blank" href="./detail.html?name=' +
                name +
                '">' +
                res[i].children[j].name +
                '（' +
                dateFtt('yyyy-MM-dd hh:mm:ss', new Date(res[i].children[j].time)) +
                '）' +
                '</a>'
              html +=
                '<button data-project="' +
                res[i].name +
                '" data-version="' +
                res[i].children[j].name +
                '" type="button" class="btn btn-danger btn-xs del-project">删除</button>'
              html += '</li>'
            }
            html += '</ul>'
            html += '</div>'
            html += '</div>'
            html += '</div>'
          }
          $('#accordion').html(html)
        })
      }
      $(function() {
        getList()

        $('#accordion').on('click', 'button.del-project', function(e) {
          console.log(e)

          var projectname = $(this).attr('data-project')
          var projectversion = $(this).attr('data-version')
          $.ajax({
            url: '/del',
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            dataType: 'json',
            data: { projectname, projectversion },
            success: function(res) {
              if (res.code == 0) {
                getList()
              } else {
                alert(res.message)
              }
            }
          })
        })
      })
    </script>
  </body>
</html>
